import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image, Navigator} from '@tarojs/components';
import {AtIcon, AtModal} from "taro-ui";
import {http} from '../../utils/http';
import {RESOURCE_URL, FROZEN_REPAYMENT, FROZEN_REPAYMENT_DETAIL} from '../../constants/api';
import {user} from '../../utils/user.service'
import {GetRequest, vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {h5Wx} from "../../utils/h5.service";
import './wallet.scss';

type PageState = {
  model: boolean
  userIdentity: any
  uuid: any
}

export default class Wallet extends Component {
  state: PageState = {
    model: false,
    userIdentity: {},
    uuid: '',
  }
  async componentDidShow() {
    vcmonitor(this)
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const isLogin = await user.checkLogin()
    this.setState({uuid: Taro.getCurrentInstance().router.params.uuid})
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.switchTab({url: '/pages/my/index/index'})
      }, 1500)
      return
    }
    await this.getData()
  }

  async getData() {
    const userIdentity = await user.getUserData()
    if (!userIdentity) {
      return
    }
    this.setState({ userIdentity })
  }

  debts() {
    this.setState({ model: true })
  }

  handleClose(){
    this.setState({ model: false })
  }
  handleCancel(){
    this.setState({ model: false })
  }
  async handleConfirm(){
    Taro.showLoading({ title: '还款中。。。' })
    const wallet = await http.HPost(FROZEN_REPAYMENT, { uuid: this.state.uuid })
    Taro.hideLoading()
    if (wallet) {
      await this.getData()
      Taro.showToast({title: wallet.data})
    }
    this.setState({ model: false })
  }
  render() {
    const {model, userIdentity, uuid} = this.state
    return (
      <View className='wallet-root'>
        <GzhAuth />
        <View className='head'>
          <Image className='iconImg' src={RESOURCE_URL + "/resources/weapp/images/cashout-icon.png"} mode='aspectFill' />
          <View className='title'>冻结金额</View>
          <View className='num total'><Text>￥</Text>{userIdentity.frozen_balance || 0}</View>
        </View>
        <View className='btn-box tadpole'>
          <View className='btn'>
            <View
              onClick={this.debts.bind(this)}
              className='btn-style'
              style={`background-color: ${process.env.mainColor};font-size:18px;`}
            >从余额转入还款</View>
          </View>
        </View>
        <View className='tip-remark'>注：未还款前，余额将自动冻结所欠费用，不能提现。</View>
        <View style='height: 20px' />
        <View className='tips-box' style='justify-content: center;'>
          <Navigator url={`/distributor/wallet/debtsDetail?uuid=${uuid}`} className='tips-item' hoverClass='none'>
            <AtIcon value='clock' size='16' color='#666' />
            <Text>交易记录</Text>
          </Navigator>
        </View>
        <AtModal
          className='custom-model-debts'
          isOpened={model}
          title=''
          cancelText='取消'
          confirmText='确认'
          onClose={this.handleClose.bind(this)}
          onCancel={this.handleCancel.bind(this)}
          onConfirm={this.handleConfirm.bind(this)}
          content='确认要从余额转入还款吗？'
        />
      </View>
    );
  }
}
